import React from 'react'
// ===================================================================== global declare
const { $Lazy, $fn } = window
// ===================================================================== private template
const Page = $Lazy.load(()=>import('#tp/page/page-container'))
const Tabs = $Lazy.load(()=>import('#tp/tabs/tabs'))
// ===================================================================== data
let clear
// ===================================================================== component
class Index extends React.Component{
	state = {
		index:$fn.local('specimen-record-index') || 0,
		pages: [
			{ component:$Lazy.state(()=>import('./cpt/a')) },
			{ component:$Lazy.state(()=>import('./cpt/b')) },
			{ component:$Lazy.state(()=>import('./cpt/c')) },
		]
	}
	
	componentDidMount(){
		const { pages, index } = this.state
		pages[index].first = true
		this.setState({ pages })
	}
	
	tabs = [
		{ title:'条码生成记录', status:0 },
		{ title:'条码使用记录', status:1 },
		{ title:'条码领用记录', status:2 }
	]
	
	render(){
		const { index, pages, controls } = this.state
		return (
			<>
				<Page>
					{/* 选项卡 */}
					<Tabs
						data				= { this.tabs }
						defaultActiveKey 	= { index }
						onTabs 				= { (data, index) => {
							const _index = +index
							pages[_index].first = true
							this.setState({ index:_index, pages }, ()=>{
								clearTimeout(clear)
								if(pages[_index].first){
									clear = setTimeout(()=>{
										this.setState({ controls : this['ref' + _index]?.controls?.() })
									},200)
								}
							})
							$fn.local('specimen-record-index', _index)
						}}
						controls	= { controls }
					/>
					
					{
						pages.map((v,i)=> v.first && (
							<div className='ex rel fv' key={i} style={{ display: +index === i && v.first ? 'flex' : 'none' }}>
								<v.component 
									onRef		=	{ ref => {
										this['ref' + i] = ref
										this.setState({ controls : this['ref' + i].controls() })
									}}
									onKeyChange	= { () => {
										this.setState({ controls : this['ref' + index].controls() })
									}}
								 />
							</div>
						))
					}
					
				</Page>
				
			</>
		)
	}
}

export default Index